<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>

<script type="text/babel">
    // todo 通过父组件多次渲染 动态加载 li

    class Father extends React.Component {
        constructor(props) {
            super(props)

        }

        father(num) {
            alert(`接到子元素传过来的${num}`)
        }

        render() {
            return (
                <div>
                    <div className="btn btn-default">父元素按钮</div>
                    <Son  send={this.father.bind(this)}/>
                </div>
            )
        }
    }


    class Son extends React.Component {
        constructor(props) {
            super(props);

        }


        render() {
            this.props.send(55);
            return <div className="btn btn-danger" >子元素</div>


        }
    }


    ReactDOM.render(
        <Father/>,
        document.getElementById("example")
    )

</script>
</body>

</html>